<template>
  <div class="echart-part">
    <div class="echart-title" style="">
      <span style="text-align: left">{{para.title}}</span>
<!--      <span style="position: absolute; top:-.05rem; right: .1rem">-->
<!--        <i-switch v-model="play" size="large" true-color="#13ce66" false-color="" @on-change="switchChart">-->
<!--        <span slot="open">播放</span>-->
<!--        <span slot="close">停止</span>-->
<!--      </i-switch>-->
<!--      </span>-->
    </div>
    <Row>
      <Col span="14">
        <mail-direct-data :para="{id:'direct', height:para.innerHeight}" ref="mailDirectData"></mail-direct-data>
      </Col>
      <Col span="10">
        <mail-state-data :para="{id:'state', height:para.innerHeight}"></mail-state-data>
      </Col>
    </Row>
  </div>
</template>
<script>
  const echarts = require("echarts");
  import mailDirectData from './mail-direct-data'
  import mailStateData from './mail-state-data'

  let myChart;
  export default {
    name: "mail-data",
    components: {
      mailStateData,
      mailDirectData
    },
    props: {
      para: {}
    },
    data() {
      return {
        play: true
      }
    },
    watch: {
      reload(value) {

      }
    },
    mounted() {

    },
    methods: {
        switchChart() {
            this.play ? this.$refs.mailDirectData.startPlay(): this.$refs.mailDirectData.stopPlay()
        }
    }
  }
</script>

<style scoped>
.echart-title{
  margin-bottom: .1rem;
}
</style>
